<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
  
  <!-- Primary Meta Tags - Bilingual -->
  <title>open-nof1.ai - AI 驱动的加密货币交易监控系统 | Cryptocurrency Trading Monitor</title>
  <meta name="title" content="open-nof1.ai - AI 驱动的加密货币交易监控系统 | Cryptocurrency Trading Monitor">
  <meta name="description" content="实时监控加密货币交易账户，查看 AI 交易决策、资产曲线、持仓情况和交易历史。支持 BTC、ETH、SOL 等多种主流加密货币的实时价格追踪。Real-time cryptocurrency trading account monitoring with AI decision tracking, equity curves, positions, and trade history.">
  <meta name="keywords" content="加密货币交易,AI交易系统,比特币交易,以太坊交易,SOL交易,数字货币监控,交易策略,量化交易,cryptocurrency trading,AI trading system,Bitcoin trading,Ethereum trading,SOL trading,crypto monitor,trading strategy,quantitative trading">
  <meta name="author" content="open-nof1.ai">
  <meta name="robots" content="index, follow">
  <meta name="language" content="Chinese, English">
  <meta name="revisit-after" content="7 days">
  
  <!-- Alternative Languages -->
  <link rel="alternate" hreflang="zh-CN" href="https://open-nof1.195440.com/">
  <link rel="alternate" hreflang="en-US" href="https://open-nof1.195440.com/">
  <link rel="alternate" hreflang="x-default" href="https://open-nof1.195440.com/">
  
  <!-- Canonical URL -->
  <link rel="canonical" href="https://open-nof1.195440.com/">
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://open-nof1.195440.com/">
  <meta property="og:title" content="open-nof1.ai - AI 驱动的加密货币交易监控系统">
  <meta property="og:description" content="实时监控加密货币交易账户，查看 AI 交易决策、资产曲线、持仓情况和交易历史。支持 BTC、ETH、SOL 等多种主流加密货币的实时价格追踪。">
  <meta property="og:image" content="https://open-nof1.195440.com/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:locale" content="zh_CN">
  <meta property="og:locale:alternate" content="en_US">
  <meta property="og:site_name" content="open-nof1.ai">
  
  <!-- Open Graph - English -->
  <meta property="og:title:en" content="open-nof1.ai - AI-Powered Cryptocurrency Trading Monitor">
  <meta property="og:description:en" content="Real-time cryptocurrency trading account monitoring with AI decision tracking, equity curves, positions, and trade history. Supports BTC, ETH, SOL and other major cryptocurrencies.">
  
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="https://open-nof1.195440.com/">
  <meta name="twitter:title" content="open-nof1.ai - AI 驱动的加密货币交易监控系统">
  <meta name="twitter:description" content="实时监控加密货币交易账户，查看 AI 交易决策、资产曲线、持仓情况和交易历史。">
  <meta name="twitter:image" content="https://open-nof1.195440.com/og-image.png">
  
  <!-- Mobile Web App -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="open-nof1.ai">
  <meta name="theme-color" content="#000000">
  
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  <!-- Structured Data (JSON-LD) - Bilingual -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "open-nof1.ai",
    "name@zh": "open-nof1.ai - AI 驱动的加密货币交易监控系统",
    "name@en": "open-nof1.ai - AI-Powered Cryptocurrency Trading Monitor",
    "description": "AI 驱动的加密货币交易监控系统，实时跟踪交易账户和 AI 决策",
    "description@zh": "AI 驱动的加密货币交易监控系统，实时跟踪交易账户和 AI 决策",
    "description@en": "AI-powered cryptocurrency trading monitoring system with real-time account tracking and AI decision insights",
    "url": "https://open-nof1.195440.com/",
    "applicationCategory": "FinanceApplication",
    "operatingSystem": "Web",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD"
    },
    "featureList": [
      "实时加密货币价格监控 / Real-time cryptocurrency price monitoring",
      "AI 交易决策跟踪 / AI trading decision tracking",
      "资产曲线可视化 / Equity curve visualization",
      "持仓管理 / Position management",
      "交易历史记录 / Trade history"
    ],
    "creator": {
      "@type": "Organization",
      "name": "open-nof1.ai",
      "url": "https://github.com/195440/open-nof1.ai"
    },
    "inLanguage": ["zh-CN", "en-US"]
  }
  </script>
  
  <link rel="stylesheet" href="monitor-styles.css">
</head>

<body>
  <!-- Disclaimer Banner -->
  <div class="disclaimer-banner">
    <span><strong>免责声明：</strong>本系统仅供学习研究和技术演示目的，不构成任何投资建议或交易推荐。加密货币交易具有高风险，可能导致本金全部损失。请独立判断并自行承担投资风险。</span>
  </div>

  <!-- Header -->
  <header class="header">
    <div class="nav-bar">
      <div class="logo">open-nof1</div>
      <nav class="nav-menu">
        <a href="#" class="nav-link active">LIVE</a>
        <a href="https://github.com/195440/nof1.ai?tab=readme-ov-file#快速开始" class="nav-link" target="_blank" rel="noopener noreferrer">QUICK START</a>
        <a href="https://github.com/195440/open-nof1.ai" class="nav-link github-link" target="_blank" rel="noopener noreferrer">
          <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: middle; margin-right: 5px;">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
          </svg>
          <span>GitHub</span>
          <span class="github-stars" id="github-stars">
            <svg viewBox="0 0 16 16" fill="currentColor">
              <path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
            </svg>
            <span id="stars-count">...</span>
          </span>
        </a>
      </nav>
    </div>
  </header>

  <!-- Crypto Price Ticker -->
  <div class="ticker-wrapper">
    <div class="ticker-content" id="ticker">
      <div class="ticker-item">
        <span class="crypto-name">BTC</span>
        <span class="crypto-price" data-symbol="BTC">$95,000.00</span>
      </div>
      <div class="ticker-item">
        <span class="crypto-name">ETH</span>
        <span class="crypto-price" data-symbol="ETH">$3,500.00</span>
      </div>
      <div class="ticker-item">
        <span class="crypto-name">SOL</span>
        <span class="crypto-price" data-symbol="SOL">$180.00</span>
      </div>
      <div class="ticker-item">
        <span class="crypto-name">BNB</span>
        <span class="crypto-price" data-symbol="BNB">$600.00</span>
      </div>
      <div class="ticker-item">
        <span class="crypto-name">DOGE</span>
        <span class="crypto-price" data-symbol="DOGE">$0.3500</span>
      </div>
      <div class="ticker-item">
        <span class="crypto-name">XRP</span>
        <span class="crypto-price" data-symbol="XRP">$0.50</span>
      </div>
    </div>
  </div>

  <!-- Main Content -->
  <main class="main-content">
    <!-- Account Equity Curve Section -->
    <section class="chart-section">
      <div class="chart-header">
        <h3 class="chart-title">资产曲线</h3>
      </div>
      <div class="chart-container">
        <canvas id="equityChart"></canvas>
      </div>
    </section>

    <!-- AI Decision Section -->
    <section class="chart-section">
      <div class="chart-header">
        <h3 class="decision-title">最新 AI 决策</h3>
        <div class="decision-meta" id="decision-meta">
          <span class="decision-time">加载中...</span>
          <span class="decision-iteration">#-</span>
        </div>
      </div>
      <div class="decision-container">
        <div class="decision-content" id="decision-content">
          <p class="loading">加载 AI 决策中...</p>
        </div>
      </div>
    </section>

    <!-- Account Value Section -->
    <section class="account-section">
      <div class="account-header">
        <h2>总资产</h2>
        <div class="theme-toggle-btn" id="trend-colors-btn" style="cursor: pointer;">
          <span>THEME: 红涨绿跌</span>
        </div>
      </div>
      <div class="account-value">
        <span class="currency-symbol">$</span>
        <span class="value-amount" id="account-value">0.00</span>
      </div>
      <div class="value-change">
        <span class="change-amount" id="value-change">+$0.00</span>
        <span class="change-percent" id="value-percent">(+0.00%)</span>
      </div>
      <div class="account-details">
        <div class="detail-item">
          <span class="detail-label">可用余额</span>
          <span class="detail-value" id="available-balance">0.00</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">未实现盈亏</span>
          <span class="detail-value" id="unrealised-pnl">+0.00</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">当前策略</span>
          <span class="detail-value strategy-value" id="strategy-display">
            <span class="strategy-badge-inline" id="strategy-badge">加载中...</span>
            <span class="strategy-info-inline" id="strategy-info-inline">-</span>
          </span>
        </div>
      </div>

      <!-- Current Positions Cards -->
      <div class="positions-cards" id="positions-cards">
        <div class="positions-cards-header">
          <span class="positions-cards-title">当前持仓</span>
        </div>
        <div class="positions-cards-container" id="positions-cards-container">
          <div class="positions-cards-empty">暂无持仓</div>
        </div>
      </div>
    </section>

        <!-- Positions Section -->
        <section class="positions-section">
            <div class="section-header-with-action">
                <h2 class="section-header">当前持仓</h2>
                <button class="btn-login" id="login-btn">登录</button>
            </div>
            <div class="positions-container">
                <table class="positions-table">
                    <thead>
                        <tr>
                            <th>币种</th>
                            <th>方向</th>
                            <th>开仓倍数</th>
                            <th>开仓价格</th>
                            <th>开仓价值</th>
                            <th>当前价格</th>
                            <th>未实现盈亏</th>
                            <th>收益率</th>
                            <th class="th-actions">操作</th>
                        </tr>
                    </thead>
                    <tbody id="positions-body">
                        <tr>
                            <td colspan="9" class="loading">加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- Trades Section -->
        <section class="trades-section">
            <h2 class="section-header">交易历史 <span id="tradesCount"></span></h2>
            <div class="trades-container">
                <table class="trades-table">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>币种</th>
                            <th>类型</th>
                            <th>方向</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>杠杆</th>
                            <th>手续费</th>
                            <th>盈亏</th>
                        </tr>
                    </thead>
                    <tbody id="trades-body">
                        <tr>
                            <td colspan="9" class="loading">加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
  </main>

  <!-- Login Modal -->
  <div class="modal" id="login-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>输入平仓密码</h3>
        <span class="modal-close" id="modal-close">&times;</span>
      </div>
      <div class="modal-body">
        <input type="password" id="password-input" class="password-input" placeholder="请输入平仓密码">
        <p class="modal-hint">请输入环境变量 CLOSE_POSITION_PASSWORD 配置的密码</p>
      </div>
      <div class="modal-footer">
        <button class="btn-cancel" id="btn-cancel">取消</button>
        <button class="btn-confirm" id="btn-confirm">确认</button>
      </div>
    </div>
  </div>

  <!-- Toast Notification Container -->
  <div class="toast-container" id="toast-container"></div>

  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
  <script src="monitor-script.js"></script>
</body>

</html>